<template>
 <el-container>
    <el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="流程名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>

      <el-form-item label="状态">
        <el-select v-model="form.status" placeholder="请选择">
          <el-option
            v-for="(item,i) in work.work_state_list"
            :key="i"
            :label="item"
            :value="i">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="类型">
        <el-select v-model="form.type" placeholder="请选择">
          <el-option
            v-for="(item,i) in work.work_type_list"
            :key="i"
            :label="item"
            :value="i">
          </el-option>
        </el-select>
      </el-form-item>


   <el-form-item>
   <el-row>
     <el-col :span="12"><el-button type="primary" @click="workRows++">增加流程</el-button></el-col>
     <el-col :span="12"><el-button type="danger" @click="workRows--" v-if="workRows > 1">删除流程</el-button></el-col>
   </el-row>
  </el-form-item>


  <el-form-item>
    <el-row>
    <el-col :span="12">
      <el-timeline>
        <el-timeline-item
         v-for="(i,n) in workRows"
         :key="n"
        >
        <el-row :gutter="10">
          <el-col :span="24">
            <el-select v-model="form.position[n]" placeholder="请选择职位" filterable>
              <el-option
              v-for="(item,k) in position_list"
              :key="k"
              :label="item.title"
              :value="item.id">
              </el-option>
            </el-select>
           </el-col>
          </el-row>
        </el-timeline-item>
      </el-timeline>
    </el-col>


    <el-col :span="12" v-if="workRows > 0">
      <el-timeline>
        <el-timeline-item
          v-for="(j,k) in workRows"
          :key="k"
        >
          {{position_all[form.position[k]]}}
        </el-timeline-item>
      </el-timeline>
    </el-col>


  </el-row>
  </el-form-item>

    <el-form-item label="备注">
      <el-input type="textarea" v-model="form.desc"></el-input>
    </el-form-item>

    <el-form-item>
        <el-button type="primary" @click="addNewWork">立即创建</el-button>
        <el-button @click="resetWork('form')">取消</el-button>
      </el-form-item>
    </el-form>

 </el-container>
</template>

<script>

import {mapState,mapActions} from 'vuex'
import {addWork} from '@/apilist/WorkFlow'
export default {
  name: "addNewWork",
  data(){
    return {
         form:{
           name:'',
           position:[],
           desc:'',
           status:'',
           type: '项目',
         },
         workRows:1,
    }
  },

  computed:{
    ...mapState("Setdata",["position_list","position_all","work"]),
  },
methods:{

  // ...mapActions('Setdata',["getUserListAction"]),

  addNewWork(){
      addWork(this.form).then(res => {
          this.$message({
              type: 'success',
              message: res.msg,
              onClose: () => {
                  this.resetWork('form')
              }
          })
      })
  },
  resetWork(formName){
      this.form.name = ''
      this.form.position = []
      this.form.desc = ''
      this.form.status = ''
      this.form.type = ''
      this.workRows = 1
  },

},
}
</script>

<style scoped>
.block{padding: 10px 0;}
.ac{text-align: center;padding: 10px 0;}
</style>
